<template>
	<view>
		<view class="u-skeleton">
			<view class="step">
				<counseling-step class="u-skeleton-fillet" :stepOptions="stepOptions"></counseling-step>
			</view>
			<view class="info">
				<image class="img u-skeleton-circle" :src="orderDetail.team_avatar || require('../../static/images/avatar.png')" mode=""></image>
				<view class="introduce">
					<view class="tit fw u-skeleton-fillet">
						<text v-if="orderDetail.type == 0">图文咨询</text>
						<text v-if="orderDetail.type == 1">电话咨询</text>
						<text v-if="orderDetail.type == 2">文书服务</text>
						<text v-if="orderDetail.type == 3">律师函</text>
						<text v-if="orderDetail.type == 4">案件委托</text>
						<text v-if="orderDetail.type == 5">企业服务</text>
						<text v-if="orderDetail.tag_name">——{{ orderDetail.tag_name }}</text>
					</view>
					<view class="ser u-skeleton-fillet">
						本单由
						<text>{{ orderDetail.team_name }}</text>
						提供服务
					</view>
					<view class="time u-skeleton-fillet">{{ orderDetail.create_time }}</view>
				</view>
			</view>
			<view class="identity">
				<image class="img u-skeleton-circle" :src="orderDetail.team_avatar || require('../../static/images/avatar.png')" mode=""></image>
				<view class="information">
					<view class="name fw u-skeleton-fillet">{{ orderDetail.team_name }}</view>
					<view class="text u-skeleton-fillet">{{ orderDetail.team_description }}</view>
				</view>
			</view>
			<view class="service-record">
				<view class="title fw u-skeleton-fillet">服务记录</view>
				<view class="item" v-if="orderDetail.create_time">
					<view class="point u-skeleton-circle"></view>
					<view class="status u-skeleton-fillet">用户下单</view>
					<view class="finish-time u-skeleton-fillet">{{ orderDetail.create_time }}</view>
				</view>
				<view class="item" v-if="orderDetail.take_time">
					<view class="point u-skeleton-circle"></view>
					<view class="status u-skeleton-fillet">律师接单</view>
					<view class="finish-time u-skeleton-fillet">{{ orderDetail.take_time }}</view>
				</view>
				<view class="item" v-if="orderDetail.finish_time">
					<view class="point u-skeleton-circle"></view>
					<view class="status u-skeleton-fillet">完成时间</view>
					<view class="finish-time u-skeleton-fillet">{{ orderDetail.finish_time }}</view>
				</view>
				<view class="item" v-if="orderDetail.close_time">
					<view class="point u-skeleton-circle"></view>
					<view class="status u-skeleton-fillet">关闭时间</view>
					<view class="finish-time u-skeleton-fillet">{{ orderDetail.close_time }}</view>
				</view>
			</view>
			<view class="btn-con">
				<view class="comment u-skeleton-fillet" v-if="orderDetail.status===0" @click="navTo('close', orderDetail)">关闭订单</view>
				<view class="comment u-skeleton-fillet" v-if="orderDetail.status===3" @click="navTo('comment', orderDetail)">服务评价</view>
				<view class="comment u-skeleton-fillet" v-if="orderDetail.status===0" @click="navTo('pay', orderDetail)">点击支付</view>
				<view class="comment u-skeleton-fillet" v-if="orderDetail.status===1 || orderDetail.status===2" @click="navTo('finish', orderDetail)">确认完成</view>
				<!-- <view class="detail u-skeleton-fillet">查看详情</view> -->
			</view>
			<popup-pay :popShow="popShow" :money="money" @closePopup="closePopup" @confirmPay="confirmPay"></popup-pay>
			<u-modal v-model="showModal" :content="contentText" :show-cancel-button="true" @confirm="closeConfirm"></u-modal>
			
		</view>
		<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	import counselingStep from '../../components/counseling-step/counseling-step.vue'
	import { orderClientFind, orderClose, orderPay, orderFinish } from '@/api/orderApi.js'
	export default {
		data() {
			return {
				loading: true, // 是否显示骨架屏组件
				stepOptions: [
					{
						step: 1,
						val: '待付款',
						show: true
					},
					{
						step: 2,
						val: '服务中',
						show: false
					},
					{
						step: 3,
						val: '已完成',
						show: false
					},
				],
				options: {},
				orderDetail: {
					create_time: "2021-01-08 09:46:45",
					finish_time: "2021-01-08 09:46:45",
					take_time: "2021-01-08 09:46:45",
					close_time: "2021-01-08 09:46:45",
					tag_name: '企业服务',
					team_name: '企业服务',
					description: '企业服务企业服务企业服务'
				},
				
				showModal: false, // 关闭订单的模态框
				contentText: '确认关闭订单吗？',
				orderId: '',
				popShow: false,
				btnDisabled: false,
				money: {}, // 弹出的余额和价格
				isFinish: false, // 是否点击完成订单
				
			}
		},
		onLoad(options) {
			this.options = options
			setTimeout(() => {
				this.loading = false
			}, 1000)
			this._orderClientFind()
		},
		methods: {
			async _orderClientFind() {
				const res = await orderClientFind({id: this.options.id-0})
				console.log(res)
				this.orderDetail = res.data.data.list
				this.orderDetail.paytypes = res.data.data.paytypes
				if (this.orderDetail.status === 0) {
					this.stepOptions[0].show = true
					this.stepOptions[1].show = false
					this.stepOptions[2].show = false
				} else if (this.orderDetail.status === 1 || this.orderDetail.status === 2) {
					this.stepOptions[0].show = true
					this.stepOptions[0].val = '已付款'
					this.stepOptions[1].show = true
					this.stepOptions[2].show = false
				} else if (this.orderDetail.status === 3) {
					this.stepOptions[0].show = true
					this.stepOptions[0].val = '已付款'
					this.stepOptions[1].show = true
					this.stepOptions[2].show = true
				} else if (this.orderDetail.status === 4 && this.orderDetail.paytype == 0) {
					this.stepOptions[0].show = false
					this.stepOptions[1].show = false
					this.stepOptions[2].show = false
				} else if (this.orderDetail.status === 4 && this.orderDetail.paytype == 1) {
					this.stepOptions[0].show = false
					this.stepOptions[0].val = '待付款'
					this.stepOptions[1].show = false
					this.stepOptions[2].show = false
				}
			},
			navTo(option,item) {
				if (option === 'back') {
					uni.navigateBack()
				} else if (option === 'close') {
					console.log(item)
					this.showModal = true
					this.orderId = item.id
				} else if (option === 'pay') {
					console.log(item)
					this.popShow = true
					this.orderId = item.id
					this.money = item
				} else if (option === 'finish') {
					console.log(item)
					this.orderId = item.id
					this.showModal = true
					this.contentText = '完成该订单？'
					this.isFinish = true
				} else if (option === 'comment') {
					console.log(item)
					if (item.appraisal) return uni.showToast({title: '您已评价',icon: 'none'})
					this.orderId = item.id
					uni.navigateTo({url: `/pages/order/comment?orderId=${item.id}`})
				}
			},
			async closeConfirm() {
				uni.showLoading({title: '加载中...'})
				if (this.isFinish) {
					console.log('wanc')
					const res = await orderFinish({id: this.orderId})
					uni.showToast({title: '订单已完成',icon: 'none'})
					this.isFinish = false //  成功后必须设置false
				} else {
					const res = await orderClose({id: this.orderId})
					uni.showToast({title: '关闭成功',icon: 'none'})
				}
			},
			closePopup(data) {
				console.log(data)
				this.popShow = data
				this.btnDisabled = false
			},
			async confirmPay(e) {
				console.log(e)
				this.popShow = e.popShow
				uni.showLoading({title: '加载中...'})
				const res = await orderPay({id: this.orderId-0, paytype: e.paymentWay})
				console.log(res)
				if (res.data.data.price == 0) return uni.navigateTo({url: '/pages/order/pay-success?orderId='+this.orderId})
				// #ifdef APP-PLUS
				if (e.paymentWay === 3) {
					// 微信支付
					this.$utils.appWxPay(res.data.data.appConfig, (success)=> {
						console.log(success)
						// uni.navigateTo({url: '/pages/order/pay-success'})
					}, (error) => {
						console.log(error)
					})
				} else if (e.paymentWay === 2) {
					console.log('支付宝支付')
				} else if (e.paymentWay === 1) {
					console.log('余额支付')
					uni.navigateTo({url: '/pages/order/pay-success?orderId=' + res.data.data.id})
				}
				// #endif
				
			}
		},
		components: {
			counselingStep
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
	.step {
		background-color: $uni-bg-color;
		padding: 40rpx 0;
	}
	.info {
		display: flex;
		height: 190rpx;
		align-items: center;
		margin: 20rpx 0;
		background-color: $uni-bg-color;
		padding: 0 30rpx;
		.img {
			width: 130rpx;
			height: 130rpx;
			border-radius: 6rpx;
			margin-right: 22rpx;
		}
		.introduce {
			.tit {
				font-size: 30rpx;
				color: #3e3e3e;
			}
			.ser {
				font-size: 24rpx;
				color: #999;
				margin: 10rpx 0 22rpx;
				text {
					color: #5b5e67;
					padding: 0 15rpx;
				}
			}
			.time {
				font-size: 26rpx;
				color: #989898;
			}
		}
	}
	.identity {
		background-color: $uni-bg-color;
		display: flex;
		padding: 30rpx;
		margin-bottom: 20rpx;
		.img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
		.information {
			flex: 1;
			margin-left: 14rpx;
			.name {
				font-size: 28rpx;
				color: #222c42;
			}
			.text {
				font-size: 24rpx;
				color: #5b5e67;
				padding-top: 8rpx;
			}
		}
	}
	.service-record {
		background-color: $uni-bg-color;
		padding: 30rpx;
		.title {
			font-size: 38rpx;
			color: #2c313c;
			padding-bottom: 10rpx;
		}
		.item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			.point {
				width: 16rpx;
				height: 16rpx;
				background-color: #898b91;
				border-radius: 50%;
			}
			.active {
				background-color: #d9b975;
			}
			.status {
				font-size: 28rpx;
				color: #5b5e67;
				margin-left: 30rpx;
			}
			.finish-time {
				font-size: 24rpx;
				color: #8a8c92;
				margin-left: auto;
			}
		}
	}
	.btn-con {
		display: flex;
		height: 100rpx;
		align-items: center;
		font-size: 24rpx;
		justify-content: flex-end;
		background-color: #fff;
		padding: 30rpx;
		view {
			width: 130rpx;
			height: 50rpx;
			border-radius: 4rpx;
			// line-height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			&:active {
				opacity: .9;
			}
		}
		.comment {
			background-color: #0d2647;
			color: #fff;
			border: solid 1rpx #0d2647;
			margin-left: 28rpx;
		}
		.detail {
			background-color: #fff;
			color: #3e3e3e;
			border: solid 1rpx #999;
			margin-left: 28rpx;
		}
	}
</style>
